import React from 'react';
import { SearchBar, Icon } from 'weaver-mobile';
import AppListView from './AppListView';
import SelectDown from '../../../common/select-down';
import classNames from 'classnames';
import { Tools } from 'weaver-mobile';

const getLabel = Tools.getLabel; 

export default class TabCont extends React.Component {
  constructor(props) {
    super(props);

    this.state = { searchValue: props.searchValue };
  }

  componentWillUnmount() {
    this.onSelectChange('', getLabel(523247, '全部分组'));
  }

  onSubmit = (val) => {
    const { changeSearchValue, _key, searchValue } = this.props;

    if (searchValue === val) return;

    changeSearchValue(_key, val);
  }

  onSelectChange = (id, groupName) => {
    const { changeGroupId, groupid, _key } = this.props;

    if (id === groupid) return;

    changeGroupId(_key, id);
  }

  formatDatas = (datas) => {
    const newDatas = [];

    datas && datas.forEach(data => {
      newDatas.push({ id: data.id, name: data.groupName });
    });

    return newDatas;
  }

  onSearchValChange = val => {
    this.setState({ searchValue: val });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.searchValue !== this.state.searchValue) {
      this.setState({ searchValue: nextProps.searchValue });
    }
  }

  render () {
    const { visible, leftDatas, groupid, appLvpStore, onFillinEnable, _key } = this.props;
    const { searchValue } = this.state;
    const datas = JSON.parse(JSON.stringify(leftDatas));

    datas.unshift({ id: '', groupName: getLabel(523247, '全部分组') });

    return (
      <div className={classNames('edc-app-tab-cont' , {'wea-hide': !visible} )}>
        <SelectDown
          datas={this.formatDatas(datas)}
          onClick={this.onSelectChange}
          selectedId={groupid}
          clsName='select'
          downClsName='down-panel'
          visible={visible}
        />
        <div className='search'>
          <SearchBar
            placeholder={getLabel(523246, '请输入要搜索的内容')}
            onSubmit={this.onSubmit}
            value={searchValue}
            onChange={this.onSearchValChange}
          />
        </div>
        <div className='edc-app-mobile-list'>
          <AppListView
            visible={visible}
            store={appLvpStore.list}
            onFillinEnable={(appid, fillinEnable) => onFillinEnable(_key, appid, fillinEnable, )}
          />
        </div>
      </div>
    )
  }
}